<!DOCTYPE html>
<html>
<head>
    <title>canvas</title>
    <style type="text/css">
    body{
        background-color: #fff;
    }
    #c1,#c2,#c3,#c4,#c5{
        background-color: #fff;
        border:1px solid black;
    }
    #c1 span{
        color: #abc;
    }
    </style>
</head>
<body>
    <canvas id="c1" width="400" height="400">
        <span>do not support canvas</span>
    </canvas>
    <canvas id="c2" width="400" height="400"></canvas>
    <canvas id ="c3" width="400" height="400"></canvas>
    <canvas id="c4" width="400" height="400"></canvas>
    <canvas id="c5" width="400" height="400"></canvas>

    <script type="text/javascript">


window.onload  = function(){


var oC1 = document.getElementById("c1");
var oGC = oC1.getContext("2d");

oGC.translate(100,100);
oGC.rotate(45 * Math.PI/180);
oGC.rotate(45 * Math.PI/180);
oGC.scale(2,0.5);
oGC.fillRect(0,0,100,100);





//----------------------------------------------
var oC2 = document.getElementById("c2");
var oGC2 = oC2.getContext("2d");

var deg = 0;
var count = 0;
var val = 1;

oGC2.translate(100,100);
setInterval(function(){
    deg++;
    oGC2.save();
    oGC2.clearRect(-100,-100,oC2.width, oC2.height);

    if(count == 100){
        val = -1;
    }   
    else if(count == 0){
        val = 1;
    }
    count += val;
    oGC2.scale(count*1/50, count*1/50);

    oGC2.rotate(deg * Math.PI/180);
    oGC2.translate(-50,-50);


    oGC2.fillRect(0,0,100,100);
    oGC2.restore();
},10);

//----------------------------------------------
var oC3 = document.getElementById("c3");
var oGC3 = oC3.getContext("2d");




//----------------------------------------------
var oC4 = document.getElementById("c4");
var oGC4 = oC4.getContext("2d");



//----------------------------------------------
var oC5 = document.getElementById("c5");
var oGC5 = oC5.getContext("2d");





}
   </script>
</body>
</html>